<template>
  <el-container class="app_container flex">
    <Aside @handleNodeClick="handleNodeClick" />
    <el-main class="app_main flex">
      <Breadcrumb :title="pageTitle" />
      <div class="app_content">
        <el-form ref="searchForm" :model="searchMap" @submit.native.prevent>
          <el-row :gutter="4">
            <el-col :span="5">
              <el-form-item prop="date" size="small">
                <el-date-picker v-model="currentTime" value-format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @keyup.enter.native="getList()" @change="changeDate">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item prop="deviceName" size="small">
                <el-input v-model="searchMap.deviceName" placeholder="设备名称" @keyup.enter.native="getList()"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item class="flex">
                <el-button @click="getList" class="btn_primary" style="margin-right=10px;">
                  查询
                </el-button>
                <el-button @click="handleReset()" class="btn_cancel">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="supplierList" stripe class="per_table marginb-15" style="width: 100%" :height="winTableH" v-loading="loading">
          <el-table-column type="index" label="序号" header-align="center" align="center" width="80">
          </el-table-column>
          <el-table-column prop="deviceName" label="设备名称" align="center" width="160"></el-table-column>
          <el-table-column prop="deviceModel" label="设备编码" align="center"></el-table-column>
          <el-table-column prop="deviceTypeName" label="设备类型" align="center"></el-table-column>
          <el-table-column prop="deviceBrandName" label="设备品牌" align="center"></el-table-column>
          <el-table-column prop="deptName" label="所属项目" align="center"></el-table-column>
          <el-table-column prop="deviceBrandContacts" label="联系人" align="center" width="170">
            <template v-slot:default="scope">
              <span>{{ scope.row.deviceBrandContacts }}/{{ scope.row.contactsPhone }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="deviceRepairProblemType" label="设备问题" align="center">
            <template v-slot:default="scope">
              <dict-tag :options="dict.type.device_problem" :value="scope.row.deviceRepairProblemType" />
            </template>
          </el-table-column>
          <el-table-column prop="repairStartTime" label="报修时间" align="center" width="160">
          </el-table-column>
          <el-table-column prop="repairFinishTime" label="维修时间" align="center" width="160">
          </el-table-column>
          <el-table-column prop="alarmStatus" label="服务周期" align="center">
          </el-table-column>
          <el-table-column prop="status" label="任务状态" align="center">
            <template v-slot:default="scope">
              <dict-tag :options="dict.type.devicr_repair_type" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80" align="center" fixed="right">
            <template v-slot:default="scope">
              <span type="text" v-if="scope.row.status === '0'" class="tag_primary" size="small" @click="handleDetails(scope.row)">处理</span>
              <span type="text" v-else class="tag_success" size="small" @click="handleDetails(scope.row)">详情</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="total" :page.sync="searchMap.pageNum" :limit.sync="searchMap.pageSize" @change="getList" />
      </div>
    </el-main>
    <SupplierInfoDialog ref="supplierInfoDialog" @replace="replace"></SupplierInfoDialog>
  </el-container>
</template>

<script>

import Aside from '@/components/Aside'
import { EventBus } from '@/utils/eventbus'
import { listSuppliner, getSupplinerById } from "../api/suppliner"
import SupplierInfoDialog from './SupplierInfoDialog.vue'

export default {
  dicts: ['device_problem', 'devicr_repair_type'],
  data () {
    return {
      // 搜索数据
      searchMap: {
        pageNum: 1, // 当前页
        pageSize: 10,  // 默认条数
        deviceName: undefined,
        startTime: undefined,
        endTime: undefined,
      },
      // 时间
      personnelCreateTime: undefined,
      // 供应商列表
      supplierList: [],
      // 表格加载状态
      loading: false,
      // 条数
      total: 0,
      // 选择时间
      currentTime: undefined
    };
  },
  computed: {
    pageTitle () {
      return '供应商考核'
    }
  },
  created () {
    EventBus.$on('currentTree', (data) => {
      this.searchMap.deptId = data.id
      this.getList()
    })
  },
  watch: {},
  methods: {
    async getList () {
      this.loading = true;
      const response = await listSuppliner(this.searchMap)
      if (response.code === 200) {
        this.supplierList = response.rows
        this.total = response.total
        this.loading = false
      }
    },
    // 查询
    handleSearch () {
      this.getList()
    },
    // 重置
    handleReset () {
      this.searchMap = {
        ...this.searchMap,
        deviceName: undefined,
        startTime: undefined,
        endTime: undefined,
      };
      this.currentTime = undefined
      this.getList()
    },
    // 树形菜单点击
    handleNodeClick (item) {
      this.searchMap.deptId = item.id
      this.getList()
    },
    // 导出
    handleExport () {
      this.download(
        '/business/dutyCheck/export',
        {
          ...this.searchMap,
        },
        `值班考核${new Date().getTime()}.xlsx`
      );
    },
    // 日期设置
    splitDate (dateTime) {
      this.searchMap.startTime = dateTime[0]
      this.searchMap.endTime = dateTime[1]
    },
    // 计算处理周期
    calculatePeriod (endTime, startTime) {
      const start = new Date(startTime)
      const end = new Date(endTime)
      return Math.ceil((end - start) / 1000 / 60)
    },
    // 点击详情
    async handleDetails (row) {
      const problemType = this.dict.type.device_problem
      const repairType = this.dict.type.devicr_repair_type
      const response = await getSupplinerById(row.deviceRepairId)
      if (response.code === 200) {
        this.$refs.supplierInfoDialog.show(row, response.data, problemType, repairType)
      }
    },
    // 处理后刷新
    replace () {
      this.getList()
    },
    // 时间发生改变触发
    changeDate (date) {
      this.searchMap.startTime = date[0]
      this.searchMap.endTime = date[1]
    },
  },
  components: {
    Aside,
    SupplierInfoDialog
  }
}
</script>

<style lang='less' scoped>
</style>